<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        #app {
            text-align: center;
        }
        #ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            margin: 20px 50%;
        }
    </style>
</head>
<body>
<!--https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90-->
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!--对于vue本身和第三方动画，实现出场和入场动画，但是无法定义半场动画，比如：只执行入场无论点击多少次-->
    <!--借助钩子函数可以实现半场动画， 钩子函数相当于动画的生命周期函数-->
    <transition name="ani" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <!-- v-show 显示/隐藏 -->
        <div id="ball" v-show="flag"></div>
    </transition>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            flag: false,
        },
        methods: {
            beforeEnter(el) { // 钩子函数的第一个参数就是动画元素本身，是一个原生js dom对象
                // 动画执行前，为动画设置初始位置，初始样式
                el.style.transform = "translate(0, 0)" //初始位置坐标 y, x
            },
            enter(el, done) { // enter 函数第二个参数是动画完成函数，是afterEnter的引用，动画结束时需要手动调用done不然影响渲染动画效果
                // 动画执行，此时为动画设置最终状态，
                el.offsetHeight; // offsetHeight/Width/Top/Left/Right随便都可以，该句必须有，不然动画无法进行，没实际意义就是当作刷新执行动画
                el.style.transform = "translate(100px, 300px)";
                el.style.transition = "all 1s ease"; // 设置动画
                done(); // 完成动画, done就是afterEnter的引用，不调用 无法执行afterEnter函数
            },
            afterEnter(el) { // 动画完成时钩子函数
                // 此处一般设置动画结束的一些操作，比如元素隐藏
                // 控制小球隐藏，后半场动画不可见
                this.flag = !this.flag;
                console.log('after-enter')
            }
        },
    });
</script>
</body>
</html>
